<template>
    <div>
        <Title :title="title"></Title>
        <!-- 提供饼图容器 -->
        <div ref="left2" style="height: 300px;"></div>
    </div>
</template>
<script setup>
import Title from './Title.vue';
import { ref, onMounted } from 'vue';
import { get } from '@/utils/request';
// 引入饼图构造函数
import { Pie } from '@antv/g2plot';
const left2 = ref(null);
const title = ref('南通市崇川区设备状态分布');
// 声明存放设备数组
const EmpData = ref([]);
const loadPie = () => {
    // const data = [
    //     { type: '在线', value: 5 },
    //     { type: '离线', value: 4 },
    // ];

    const piePlot = new Pie(left2.value, {
        appendPadding: 10,
        data:EmpData.value,
        angleField: 'value',
        colorField: 'type',
        radius: 0.8,
        label: {
            style: {
                fill: 'white'
            },
            type: 'outer',
            content: '{name} {value}个',
        },
        //   图例
        legend: {
            position: "top",
            itemName: {
                style: {
                    fill: 'white'
                }
            }
        },
        interactions: [{ type: 'pie-legend-active' }, { type: 'element-active' }],
    });

    piePlot.render();
}
// 封装查询设备的函数
const getEmpData = async () => {
    let res = await get('/dashboard/queryDeviceOnlineNumber');
    // console.log(res, '-----');
    EmpData.value = res.data;
}
onMounted(async () => {
    await getEmpData();
    loadPie();
})
</script>
<style lang="less" scoped></style>